<template>
  <div>
<!--  <view class="return-btn" @click="goToHome" hover-class="none">-->
<!--    <image src="/static/logo/返回.png" mode="widthFix" class="return-icon"></image>-->
<!--  </view>-->
  <view class="pray-container">
    <!-- 顶部标题区域 -->
    <view class="header-section">
      <text class="section-subtitle">保佑人们健康的道教神仙</text>
      <text class="section-title">神仙祈福</text>
    </view>

    <!-- 神仙名称装饰区域 -->
    <view class="deity-section">
      <image class="lotus-icon" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E8%91%AB%E8%8A%A6.png"></image>
      <text class="deity-name">太上老君</text>
      <image class="lotus-icon" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E8%91%AB%E8%8A%A6.png"></image>
    </view>

    <!-- 神仙形象轮播 -->
    <view class="swiper-section">
      <swiper class="deity-swiper" :autoplay="true" :interval="3000" :duration="500" circular>
        <swiper-item v-for="(image, index) in deityImages" :key="index">
          <image class="deity-image" :src="image" mode="aspectFit"></image>
        </swiper-item>
      </swiper>
      <view class="swiper-dots">
        <view class="dot" v-for="(image, index) in deityImages" :key="index"
              :class="{active: currentSwiperIndex === index}"></view>
      </view>
    </view>

    <!-- 祈福按钮 -->
    <view class="pray-button-section">
      <view class="pray-button" @click="goToQifu">
        <image class="button-image" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F.png"></image>
      </view>
    </view>

    <!-- 神仙简介 -->
    <view class="description-section">
      <text class="description-text">
        太上老君被视为道的化身，向其祈福可祈求智慧启迪，心灵宁静、道德提升，也有人祈求事业顺利、生活安康。
      </text>
    </view>
  </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSwiperIndex: 0,
      deityImages: [
        "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E7%A5%9E%E4%BB%991.png",
        "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E7%A5%9E%E4%BB%992.png",
        "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E7%A5%9E%E4%BB%993.png"
      ]
    };
  },
  methods: {
    goToQifu() {
      uni.redirectTo({
        url: '/pages/qifu/qifu'
      });
    },
    handleSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    }
  }
};
</script>

<style lang="scss">
.pray-container {
  background-image: url('http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E8%83%8C%E6%99%AF.png');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.return-btn {
  width: 24px;
  height: 24px;
}

.return-icon {
  width: 100%;
  height: 100%;
}
/* 顶部标题区域 */
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;

  .section-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 5px;
  }

  .section-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
}

/* 神仙名称装饰区域 */
.deity-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  width: 100%;

  .lotus-icon {
    width: 30px;
    height: 30px;
    opacity: 0.8;
  }

  .deity-name {
    font-size: 22px;
    font-weight: bold;
    color: #FFD700;
    margin: 0 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
}

/* 神仙形象轮播 */
.swiper-section {
  width: 100%;
  height: 300px;
  margin: 20px 0;
  position: relative;

  .deity-swiper {
    width: 100%;
    height: 100%;

    .deity-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
  }

  .swiper-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: rgba(255,255,255,0.5);
      margin: 0 4px;

      &.active {
        width: 16px;
        background-color: #FFD700;
      }
    }
  }
}

/* 祈福按钮 */
.pray-button-section {
  margin: 30px 0;
  width: 80%;
  display: flex;
  justify-content: center;

  .pray-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    cursor: pointer;

    .button-image {
      width: 200px;
      height: 50px;
    }

    .button-text {
      margin-top: 10px;
      font-size: 18px;
      color: #FFD700;
      font-weight: bold;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
  }
}

/* 神仙简介 */
.description-section {
  width: 80%;
  margin: 20px 0 40px;
  padding: 15px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 8px;
  border-left: 3px solid #FFD700;

  .description-text {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    text-align: center;
  }
}
</style>
